<template>

<div class="navmenv">

  <div class="caidan">
    <img class="three" src="https://img.alicdn.com/tfs/TB17mppCFOWBuNjy0FiXXXFxVXa-36-28.png">
      <Menu/>
  </div>

  <div class="tianchong">
    <img class="ailiyun" src="//img.alicdn.com/tps/TB16hl5LpXXXXXRXVXXXXXXXXXX-198-46.png">
    <img class="gif" src="//img.alicdn.com/tps/TB1BQh7LpXXXXcJXFXXXXXXXXXX-198-46.gif">
  </div>
<!-- 搜索框 -->
<div class="baoguo">
  <el-input
    placeholder="请输入内容"
    suffix-icon="el-icon-search"
    v-model="input21">
  </el-input>
</div>
  <div class="language">
    中国站&nbsp;<i class="el-icon-arrow-down"></i>
    <ul class="select-menu">
        <li class="select-item" style="color:#00c1de">中国站</li>
        <li class="select-item">International - English</li>
        <li class="select-item">International - 简体中文</li>
        <li class="select-item">International - 한국어</li>
        <li class="select-item">International - 繁体中文</li>
        <li class="select-item">日本サイト</li>
    </ul>
  </div>
  <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="rgba(51,51,51,0)"
  text-color="#fff"
  active-text-color="#00c1de">

    <el-menu-item index="6"><i class="common-topbar-cart-icon"></i>&nbsp;购物车</el-menu-item>
  <el-menu-item index="1">控制台</el-menu-item>
  <el-menu-item index="5">文档</el-menu-item>
  <el-menu-item index="7">备案</el-menu-item>
  <el-menu-item index="3">邮箱</el-menu-item>
  <router-link to='/login'>
    <el-menu-item index="4">登录</el-menu-item>
  </router-link>
</el-menu>
  </div>
</template>

<script>
import Menu from './Menu.vue'
export default {
  name: 'HelloWorld',
  components: {
    Menu
  },
  data () {
    return {

    }
  },
  methods: {
      handleOpen(key, keyPath) {
      },
      handleClose(key, keyPath) {
      }
    }
  }

</script>
<style lang="stylus" scoped>
.navmenv
    height 50px
    min-width 1200px
    display flex
    justify-content space-between
    align-items stretch
    border-bottom 1px solid hsla(0,0%,100%,.15)
    font-size 14px
    .caidan 
        width 50px
        border-right 1px solid hsla(0,0%,100%,.15)
        &:hover
            background-color #00c1de
        &:hover .menu
            margin-left 0
    .three
        margin-top 18px
        margin-left 14px
        width 18px
        height 14px
    .tianchong
        width 500px
        .ailiyun
            position absolute
            width 80px
            height 19px
            top 15px
            margin-left 15px
        .gif
            margin-top 15px
            margin-left 15px
            width 80px
    .baoguo
        width 350px
        display flex
        flex-direction row-reverse
        .el-input
            line-height 50px
            height 50px
            width 200px
        .el-input >>> input
            transition width 0.5s,margin-left .5s
            height 50px 
            border-radius 0
            border 0
            background hsla(0,0%,100%,.12)
            &:hover,&:focus  
                margin-left -100px
                width 300px
                height 48px
                border 1px solid #00c1de !important
        .el-input >>> i
            font-size 18px
    .language
        color #fff
        width 80px
        display inline-flex
        justify-content center
        align-items center
        padding 0 10px
        position relative
        &:hover
            background-color #272b2f
        &:hover .select-menu
            display block
        &:hover .el-icon-arrow-down
            transform rotate(180deg)
        .el-icon-arrow-down
            font-size 18px
        .select-menu
            display none
            padding 10px 10px
            position absolute
            top 50px
            left 0
            width 156px
            height 180px
            background-color #272b2f
            li
                height 30px
                line-height 30px
    .el-menu-demo
        margin-left -10px
        width 380px
        border-bottom 0
        display flex
        justify-content space-between
        .el-menu-item
            background-color rgba(51,51,51,0) !important
            height 50px !important 
            line-height 50px
            padding-right 5px
            padding-left 5px
            border 0 !important
@css {
.common-topbar-cart-icon {
    vertical-align: middle;
    margin-top: -3px;
    display: inline-block;
    width: 20px;
    height: 18px;
    margin-right: 4px;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(//img.alicdn.com/tfs/TB1X8fbB1OSBuNjy0FdXXbDnVXa-40-36.png);
    }
}
</style>
<style lang="stylus">

</style>